<template>
  <div class="price-lot">
  	<!-- 价格 -->
    <div class="row">
    	<div class="col-xs-12 col-sm-12 col-md-12 line1">
    		<span class="title">单价：</span>
    		<span class="price" v-for="(price, index) in treidPrices" v-bind:key="index" v-show="index < 3">￥{{price.price | currency}}</span>
        <span class="sale-number">已售<span class="number">{{count}}</span></span>
    	</div>
    </div>
    <!-- 批量 -->
    <div class="row">
    	<div class="col-xs-12 col-sm-12 col-md-12 line2">
    		<span class="title">起订量：</span>
    		<span class="lot" v-for="(treid, index) in treidPrices" v-show="index < 3" v-bind:key="index" v-html="treidCount(treid.count, index)"></span>
    	</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    treidPrices: {
      type: Array,
      default: () => { return [] }
    },
    count: {
      type: Number,
      default: 0
    }
  },
  methods: {
    /**
     * 起订量
     * @param  { Number } count 当前的值
     * @param  { Number } index 第几个
     */
    treidCount(count, index) {
      // 如果小于起订量
      if (index < this.treidPrices.length - 1) {
        return `${count}件`
      }
      return `&ge;${count.split('-')[0] || 0}件`
    }
  }
}
</script>

<style lang="scss" scoped>
.price-lot {
	background-color: #efefef;
	color: #404040;
	font-size: 12px;
  height: 80px;
  padding: 10px 0px 10px;
  
  .line1 {
    line-height: 38px;
  }
}
.title {
  color: #AAAAAA;
  display: inline-block;
	margin-left: 10px;
  width: 70px;
}
.sale-number {
  color: #a3a3a3;
  display: inline-block;
  float: right;
  font-size: 12px; 
  width: 100px;
  padding-left: 10px;

  .number {
    color: #ee0077;
    margin-left: 4px;
  }
}
.price {
	color: #F00384;
	display: inline-block;
	font-size: 18px;
  font-weight: 600;
	width: 130px;
	text-align: left;
}
.lot {
	display: inline-block;
  font-size: 12px;
  font-weight: 600;
	min-width: 130px;
	text-align: left;
}
</style>